<template>

  <el-container class="home-container">
    <el-backtop :bottom="100">
      <div>
        <i class="el-icon-caret-top"></i>
      </div>
    </el-backtop>
    <!-- 头部 -->
    <el-header>
      <div class="logo">
        <img src="../../assets/logo1.png" width="100px" alt="">
        <span class="text">电商管理系统</span>
      </div>
      <el-button class="loginOut" @click="loginOut" size="mini">退出登录</el-button>
    </el-header>
    <!-- 主体区域 -->
    <el-container>

      <!-- 侧边栏 -->
      <el-aside :width="isfold?'64px':'200px'">
        <div class="button-fold" @click="foldHandle">|||</div>
        <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
          :default-active="$route.path" active-text-color="#ffcc33" unique-opened :collapse="isfold"
          :collapse-transition="false" router>
          <el-submenu index="1" v-for="item in asideFrom" :key="item.id" :index="item.id.toString()">
            <template slot="title">
              <i :class="iconList[item.id]"></i>
              <span>{{item.authName}}</span>
            </template>

            <el-menu-item index="1-1" v-for="itm in item.children" :key="itm.id" :index="'/' + itm.path">
              <template slot="title">
                <i :class="iconList[itm.id]"></i>

                <span> {{itm.authName}}</span>
              </template>
            </el-menu-item>

          </el-submenu>

        </el-menu>

      </el-aside>
      <!-- 内容区 -->
      <el-main>

        <router-view></router-view>
        <div class="footer">
          <div class="pp">
            <p>技术支持:Sxxx</p>
            <p>邮箱:1173019286@qq.com</p>
          </div>
        </div>
      </el-main>

    </el-container>
  </el-container>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      asideFrom: {},
      iconList: {
        103: "iconfont icon-quanxian",
        101: "iconfont icon-shangpin",
        102: "iconfont icon-order",
        145: "iconfont icon-digital",
        125: "iconfont icon-user",
        110: "iconfont icon-yonghuliebiao",
        111: "iconfont icon-role-list",
        112: "iconfont icon-quanxianliebiao",
        104: "iconfont icon-shangpin",
        115: "iconfont icon-canshu",
        121: "iconfont icon-fenjifenlei",
        107: "iconfont icon-wuliudingdan",
        146: "iconfont icon-shuju",
      },
      isfold: false,
    };
  },
  created() {
    this.getasideList();
  },
  methods: {
    loginOut() {
      // 退出登录
      window.sessionStorage.clear("token");
      this.$router.push("/login");
    },
    // 获取侧边栏数据
    async getasideList() {
      const { data } = await this.$http.get("menus");
      console.log(data, "data");
      if (data.meta.status !== 200) return this.$message.error(data.meta.msg);
      this.asideFrom = data.data;
    },
    // 菜单栏展开收缩
    foldHandle() {
      this.isfold = !this.isfold;
    },
  },
};
</script>
<style lang='less' scoped>
.el-header {
  background-color: #3d4248;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0;
  overflow: hidden;
}
.el-aside {
  background-color: #40474f;
  .el-menu {
    border-right: none;
  }
}
.el-main {
  background-color: #f2f2f2;
}
.home-container {
  height: 100vh;

  .footer {
    width: 100%;
    height: 200px;
    // background-color: red;
    position: relative;
    bottom: 0;
    overflow: hidden;

    .pp {
      width: 200px;

      // background-color: #3d4248;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-100px);
      p {
        padding: 0;
        margin: 0;
        font-size: 13px;
        color: #4f575e;
      }
    }
  }
}
.loginOut {
  background-color: #ffcc33;
  border: 0;
}
.logo {
  width: 100px;
  height: 100%;

  border-radius: 50%;
  // overflow: hidden;
  img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    top: -68px;
    left: -41px;
  }
  .text {
    position: relative;
    left: 118px;
    top: -187px;
    font-weight: 600;
    color: white;
  }
}
.iconfont {
  margin-right: 10px;
}
.button-fold {
  font-size: 10px;
  background-color: #ffcc33;
  color: #3d4248;
  line-height: 24px;
  height: 24px;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
  font-weight: 800;
}
</style>